<template>
  <div class="css-shape">
    <div class="square"></div>
    <div class="rectangle"></div>
    <div class="circle"></div>
    <div class="oval"></div>
    <div class="triangle-up"></div>
    <div class="triangle-bottom"></div>
    <div class="triangle-left"></div>
    <div class="triangle-right"></div>
    <div class="triangle-topleft"></div>
    <div class="triangle-topright"></div>
    <div class="triangle-bottomleft"></div>
    <div class="triangle-bottomright"></div>
    <div class="curvedarrow"></div>
    <div class="trapezoid"></div>
    <div class="parallelogram"></div>
    <div class="star-six"></div>
    <div class="star-five"></div>
  </div>
</template>

<script>
// @ is an alias to /src
export default {
  name: 'home'
}
</script>

<style lang="stylus">
.css-shape > div
  margin-bottom 10px
.square
  width: 100px;
  height: 100px;
  background: red;
.rectangle
  width: 200px;
  height: 100px;
  background: red;
.circle
  width: 100px;
  height: 100px;
  background: red;
  border-radius: 50%
.oval
  width: 200px;
  height: 100px;
  background: red;
  border-radius: 100px / 50px
.triangle-up
  width: 0;
  height: 0;
  border-left 50px solid transparent
  border-right 50px solid transparent
  border-bottom 100px solid red
.triangle-bottom
  width: 0;
  height: 0;
  border-left 50px solid transparent
  border-right 50px solid transparent
  border-top 100px solid red
.triangle-left
  width: 0;
  height: 0;
  border-top 50px solid transparent
  border-bottom 50px solid transparent
  border-right 100px solid red
.triangle-right
  width: 0;
  height: 0;
  border-top 50px solid transparent
  border-bottom 50px solid transparent
  border-left 100px solid red
.triangle-topleft
  width: 0;
  height: 0;
  border-top 100px solid red
  border-right 100px solid transparent
.triangle-topright
  width: 0;
  height: 0;
  border-top 100px solid red
  border-left 100px solid transparent
.triangle-bottomleft
  width: 0;
  height: 0;
  border-bottom 100px solid red
  border-right 100px solid transparent
.triangle-bottomright
  width: 0;
  height: 0;
  border-bottom 100px solid red
  border-left 100px solid transparent
.curvedarrow
  position relative
  width 0
  height 0
  border-top 9px solid transparent
  border-right 9px solid red
  transform rotate(10deg)
  &::after
    content: ""
    position: absolute
    border: 0 solid transparent
    border-top: 3px solid red
    border-radius: 20px 0 0 0
    top: -12px
    left: -9px
    width: 12px
    height: 12px
    transform: rotate(45deg)
.trapezoid
  border-bottom: 100px solid red
  border-left: 25px solid transparent
  border-right: 25px solid transparent
  height: 0
  width: 100px
.parallelogram
  width: 150px;
  height: 100px;
  transform: skew(20deg);
  background: red;
.star-six
  width: 0
  height 0
  border-left 50px solid transparent
  border-right 50px solid transparent
  border-bottom 100px solid red
  position: relative;
  &::after
    width: 0
    height 0
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-top: 100px solid red;
    position: absolute;
    content: "";
    top: 30px;
    left: -50px;
.star-five
  margin: 50px 0;
  position: relative;
  display: block;
  color: red;
  width: 0px;
  height: 0px;
  border-right: 100px solid transparent;
  border-bottom: 70px solid red;
  border-left: 100px solid transparent;
  transform: rotate(35deg);
  &::before
    border-bottom: 80px solid red;
    border-left: 30px solid transparent;
    border-right: 30px solid transparent;
    position: absolute;
    height: 0;
    width: 0;
    top: -45px;
    left: -62px;
    display: block;
    content: '';
    transform: rotate(-35deg);
  &::after
    position: absolute;
    display: block;
    color: red;
    top: 3px;
    left: -105px;
    width: 0px;
    height: 0px;
    border-right: 100px solid transparent;
    border-bottom: 70px solid red;
    border-left: 100px solid transparent;
    transform: rotate(-70deg);
    content: '';

</style>